<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <div>
            <button v-for="item in btnTextList" :key="item" @click="btnClick(item)">{{item}}</button>
        </div>
        <h1> {{ before }} {{ calc }} {{ back }} {{res == null ? '' : '= ' + res}}</h1>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data () {
            return {
                btnTextList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "+", '-', '*', '/', '=', 'c'],
                before: '', // 前面的值
                back: '', // 后面值
                calc: '', // 运算符号
                res: null, // 结果
            }
        },
        methods: {
            btnClick (item) {
                // console.log(item);
                if (item == '+' || item == '-' || item == '*' || item == '/') {
                    this.before = this.before == '' ? '0' : this.before
                    // 点击的是运算符号
                    this.calc = item
                } else if (item == '=') {

                    // 点击等于号,计算结果
                    switch (this.calc) {
                        case '+':
                            this.res = this.before * 1 + this.back * 1
                            break;
                        case '-':
                            this.res = this.before * 1 - this.back * 1
                            break;
                        case '*':
                            this.res = (this.before * 1) * (this.back * 1)
                            break;
                        case '/':
                            this.res = (this.before * 1) / (this.back * 1)
                            break;
                        default:
                            alert('计算出错')
                            break;
                    }


                } else if (item == 'c') {
                    // 清除按钮，清除结果
                    this.before = ''
                    this.back = ''
                    this.calc = ''
                    this.res = null
                } else {
                    // 数字
                    if (this.calc) {
                        // 如果运算符有内容，那么就在第二个值后面拼接
                        this.back += item
                    } else {
                        // 在第一个值后面拼接
                        this.before += item
                    }
                }

            }
        },
    })
    app.mount('#app')
</script>

</html>